<template>
  <div>
    <PageHead />
    <ul class="slides">
      <input
        v-for="item in dataList"
        :key="item.id"
        type="radio"
        :id="'control-' + item.id"
        name="control"
        :checked="item.checked"
      />

      <li
        class="slide"
        v-for="item in productList"
        :key="item.id"
        :style="{ backgroundImage: 'url(' + item.img + ')' }"
      >
        <!-- <img scr="" /> -->
        <!-- {{ item.name }} -->
      </li>
      <div class="slides_label">
        <label
          v-for="item in productList"
          :key="item.id"
          :for="'control-' + item.id"
          >{{ item.name }}</label
        >
      </div>
    </ul>
    <div style="margin-top: 200px">
      123
      <button @click="setCheack('-')">11</button>
      <button @click="setCheack('+')">22</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { productList } from "@/database/home";
useSeoMeta({ title: "首页" });
let dataList = ref([]);
onMounted(() => {
  dataList.value = productList;
});
const setCheack = (type) => {
  const list = JSON.parse(JSON.stringify(dataList.value));
  const a = dataList.value.filter((w) => w.checked);
  console.log(a);
  list[a[0].id - 1].checked = false;
  if (type === "+") {
    list[a[0].id].checked = true;
  }
  dataList.value = list;
};
</script>
<style scoped lang="scss">
ul.slides {
  position: relative;
  list-style: none;
  top: 60px;
  width: 100%;
  height: calc((600 / 1920) * 100vw);
  min-height: 250px;
  max-height: 900px;
  background-color: beige;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li.slide {
  margin: 0;
  padding: 0;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 250px;
  /* background-image: url("@/assets/img/hua.webp"); */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
  transition: 0.5s transform ease-in-out;
}
/* .slide:nth-of-type(1) {
  background-image: url("@/assets/img/hua.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
} */
.slide:nth-of-type(2) {
  left: 100%;
}
.slide:nth-of-type(3) {
  left: 200%;
}
.slide:nth-of-type(4) {
  left: 300%;
}
.slide:nth-of-type(5) {
  left: 400%;
}
.slide:nth-of-type(6) {
  left: 500%;
}
.slide:nth-of-type(7) {
  left: 600%;
}
.slides_label {
  display: flex;
  gap: 10px;
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  span {
    white-space: nowrap;
  }
}
.slides input[type="radio"] {
  display: none;
}
.slides
  input[type="radio"]:nth-of-type(1):checked
  ~ .slides_label
  label:nth-of-type(1) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(2):checked
  ~ .slides_label
  label:nth-of-type(2) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(3):checked
  ~ .slides_label
  label:nth-of-type(3) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(4):checked
  ~ .slides_label
  label:nth-of-type(4) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(5):checked
  ~ .slides_label
  label:nth-of-type(5) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(6):checked
  ~ .slides_label
  label:nth-of-type(6) {
  color: red;
}

.slides
  input[type="radio"]:nth-of-type(7):checked
  ~ .slides_label
  label:nth-of-type(7) {
  color: red;
}

.slides input[type="radio"]:nth-of-type(1):checked ~ .slide {
  transform: translateX(0%);
}

.slides input[type="radio"]:nth-of-type(2):checked ~ .slide {
  transform: translateX(-100%);
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .slide {
  transform: translateX(-200%);
}
.slides input[type="radio"]:nth-of-type(4):checked ~ .slide {
  transform: translateX(-300%);
}
.slides input[type="radio"]:nth-of-type(5):checked ~ .slide {
  transform: translateX(-400%);
}
.slides input[type="radio"]:nth-of-type(6):checked ~ .slide {
  transform: translateX(-500%);
}
.slides input[type="radio"]:nth-of-type(7):checked ~ .slide {
  transform: translateX(-600%);
}
</style>
